<template>
  <div style="height:100%" class="container">

      <div class="search_bar">
          <el-tag>问题反馈表</el-tag>
        <!--查询按钮组-->
 
          <el-radio-group v-model="radio">
      <el-radio-button  label="全部" ></el-radio-button>
      <el-radio-button label="进行中"></el-radio-button>
      <el-radio-button label="已完成"></el-radio-button>
    </el-radio-group>

        <!--搜索框-->
        <div>
          <el-input
            placeholder="请输入"
            type="text"
            v-model="input"
            suffix-icon="el-icon-search"
            class="input_check"
          ></el-input>
          <router-link to="Feedback_Add">
            <el-button class="add_button"  type="primary">添加</el-button>
          </router-link>
        </div>
      </div>
      <!--添加按钮，跳转录入表单-->
   
      <el-table
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        :data="searchMan.slice((currentPage-1)*pagesize,currentPage*pagesize)"
        style="width: 100%;margin-top:10px"
        height='520'
      >
        <el-table-column prop="feedschname" label="学校名称"></el-table-column>
        <el-table-column prop="factmod" label="活动模块"></el-table-column>
        <el-table-column prop="feedbacktime" label="反馈时间" :formatter="dateFormat"></el-table-column>
        <el-table-column prop="fopinions" label="问题说明"></el-table-column>
        <el-table-column prop="ftechnician" label="技术员"></el-table-column>
        <el-table-column prop="finputtime" label="录入时间" :formatter="dateFormat"></el-table-column>
        <el-table-column prop="fentryclerk" label="录入员"></el-table-column>
        <el-table-column prop="state" label="状态"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="details(scope.row)">查看详情</el-button>

            <!-- <el-button type="text" size="small" @click.native.prevent="aaa(scope.row)">改变状态</el-button> -->
            <el-button type="text" size="small" @click="deleteRow(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--底部分页-->
      <div class="footer">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10]"
          :page-size="pagesize"
        
          layout="total, sizes, prev, pager, next, jumper"
          :total="this.searchMan.length"
        
        ></el-pagination>
      </div>

  </div>
</template>

<script>
import { getFeedbacks, updateFeedbacks, removeFeedbacks } from "@/api/Feedback";
import { removeImage } from "@/api/UploadImage";
export default {
  data() {
    return {
      check: "",
      //表
      button1:"primary",
      button2:"",
      button3:"",
      search: "",
      currentPage: 1,
      b1:"primary",b2:"",b3:"",
      pagesize: 10,
      total: 0,
      dialogFormVisible: false,
      loading: true,
      add: false,
      data: [],
      searchData: [],
      alldata: [],
      input: "",
      list: "",
      state: "",
      radio: '全部',
      options:[]
    };
  },
  mounted() {
    this.getdata();
  },
  watch:{
    searchMan(val){
      this.total = val.length
    },
    radio(e){
      if(e=='全部') {
         this.list =  this.options.filter(data => {
          return Object.keys(data).some(key => {
            return String(data[key])
              .toLowerCase()
              .match('');
          });
        });
      
      } else {
      this.list =  this.options.filter(data => {
          return Object.keys(data).some(key => {
            return String(data[key])
              .toLowerCase()
              .match(e);
          });
        });
      }
      return this.list
    }

  },
  computed: {
    button11() {
     this.button1 = 'primary'
     this.button2 = ''
     this.button3 = ''
     this.state = ""
     console.log(this.state)
},
    button12() {
    this.button1 = ''
     this.button2 = 'primary'
     this.button3 = ''
     this.state = "进行中"
     console.log(this.state)
},
    button13() {
     this.button1 = ''
     this.button2 = ''
     this.button3 = 'primary'
     this.state = "已完成"
     console.log(this.state)
},
    searchMan() {
      var value = this.input;
      if(value) {
         return this.list.filter(data => {
          return Object.keys(data).some(key => {
            return String(data[key])
              .toLowerCase()
              .match(value);
          });
        });
      }
      return this.list
      // if (value && select) {
      //   var list = this.list.filter(data => {
      //     return Object.keys(data).some(key => {
      //       return String(data[key])
      //         .toLowerCase()
      //         .match(value);
      //     });
      //   });
      //   return list.filter(item => {
      //     return item.Maintain === select;
      //   });
      // }
      // if (value) {
      //   return this.list.filter(data => {
      //     return Object.keys(data).some(key => {
      //       return String(data[key])
      //         .toLowerCase()
      //         .match(value);
      //     });
      //   });
      // } else if (select) {
      //   return this.list.filter(item => {
      //     return item.Maintain === select;
      //   });
      // }
      // return this.list;
    }
  },
  methods: {
    // 获取
    getdata() {
      let data = async () => {
        try {
          let result = await getFeedbacks();
          if (result) {
            this.list = result;
            this.options = result
            this.loading = false;
          }
        } catch (err) {
          console.log(err);
        }
      };
      data();
    },
    // 删除
    deleteRow(row) {
      this.$confirm("此操作将删此用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          var data = row.imgsrc.split(',')
          let remove = async () => {
            try {
              await removeFeedbacks(row.feedformId);
              await removeImage(data)
            } catch (err) {
              console.log(err);
            }
          };
          remove();
          let index = this.list.findIndex(item => {
            return item === row;
          });
          this.list.splice(index, 1);
          // this.list = this.data
          this.$message({
            type: "success",
            message: "删除成功!"
          });
          this.dialogFormVisible = false;
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    adds() {
      this.dialogFormVisible = true;
      this.form = {};
      this.add = true;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pagesize = val;
      console.log(this.data);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    handleClick(row) {
      console.log(row);
    },
    details(row) {
      let index = this.list.findIndex(item => {
        return item == row;
      });
      console.log(index);
      this.$router.push({
        path: "/Maintain_1",
        query: {
          index: index
        }
      });
    },
    dateFormat(row, column, cellValue, index) {
      const daterc = row[column.property];
      console.log(daterc);
      if (daterc != null) {
        const dateMat = new Date(daterc);
        const year = dateMat.getFullYear();
        const month = dateMat.getMonth() + 1;
        const day = dateMat.getDate();
        const hh = dateMat.getHours();
        const mm = dateMat.getMinutes();
        const ss = dateMat.getSeconds();
        const timeFormat =
          year + "/" + month + "/" + day + " " + hh + ":" + mm + ":" + ss;
        return timeFormat;
      }
    }
  }
};
</script>

<style scoped>
.container{
  padding: 20px;
}
.input_check {
  width: 70%;
}
.text_position {
  margin: 10px 0 10px 20px;
}
/*分隔符样式*/
.separation {
  height: 2px;
  margin: 0 2% 0 2%;
  background-color: gray;
}

/*查询按钮组样式*/
.search_bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer{
  margin-top: 20px;
  float: right;
}

</style>
